/**
 * 运行健康分析
 */
import * as React from "react";
import { Card, Rate } from "antd";
import yunxingjiankangfenxi from "../../../../../../assets/img/dianqianquan/icon_yunxingjiankangfenxi.png";

import "./index.less";
import DancingNum from "../../../../../../compontents/DancingNum";
export interface HealthAnalysisProps {
  dataSouce: HealthyData | null;
}
interface HealthyData {
  days: number;
  offLine: number;
  onLine: number;
  total: number;
  scoreEle: any;
  scoreLoseEle: any;
  scorePower: any;
  scoreTemperature: any;
}
export interface HealthAnalysisState {
  days: number;
  offLine: number;
  onLine: number;
  total: number;
}

class HealthAnalysis extends React.Component<
  HealthAnalysisProps,
  HealthAnalysisState
> {
  state = { days: 0, offLine: 0, onLine: 0, total: 0 };
  private rate = 0;
  shouldComponentUpdate(
    newProps: HealthAnalysisProps,
    newState: HealthAnalysisState
  ) {
    if (newProps.dataSouce !== this.props.dataSouce) {
      if (newProps.dataSouce !== null) {
        let {
          scoreEle,
          scoreLoseEle,
          scorePower,
          scoreTemperature,
        } = newProps.dataSouce;
        this.setState({
          days: newProps.dataSouce.days,
          offLine: newProps.dataSouce.offLine,
          onLine: newProps.dataSouce.onLine,
          total: newProps.dataSouce.total,
        });
        let s =
          scoreEle.totalScore +
          scoreLoseEle.totalScore +
          scorePower.totalScore +
          scoreTemperature.totalScore;
        this.rate = (s / 100) * 5;
        this.forceUpdate();
      }
    }
    return true;
  }
  render() {
    return (
      <div className="HealthAnalysis">
        <Card
          title={
            <>
              <img src={yunxingjiankangfenxi} alt="运行健康分析" />
              运行健康分析
            </>
          }
        >
          <Rate
            disabled
            value={this.rate}
            style={{ fontSize: 40, color: "#407DF9", marginBottom: 50 }}
          />
          <p>
            系统已安全运行(天)：
            <strong>
              <DancingNum number={this.state.days} />
            </strong>
          </p>
          <p>
            设备数量(台)：
            <strong>
              <DancingNum number={this.state.total} />
            </strong>
          </p>
          <p>
            在线(台)：
            <strong>
              <DancingNum number={this.state.onLine} />
            </strong>
          </p>
          <p>
            离线(台)：
            <strong style={{ color: "red" }}>
              <DancingNum number={this.state.offLine} />
            </strong>
          </p>
        </Card>
      </div>
    );
  }
}

export default HealthAnalysis;
